<template>
    <el-page-header icon="" title="用户管理">
        <template #content>
            <span class="text-large font-600 mr-3"> 添加用户 </span>
        </template>
    </el-page-header>
    <el-form ref="userFormRef" style="max-width: 600px" :model="userForm" status-icon :rules="userRules" label-width="auto"
        class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
            <el-input v-model="userForm.username" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input v-model="userForm.password" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
            <el-select v-model="userForm.gender" placeholder="用户性别">
                <el-option label="隐藏" :value="0" />
                <el-option label="男" :value="1" />
                <el-option label="女" :value="2" />
            </el-select>
        </el-form-item>
        <el-form-item label="权限" prop="role">
            <el-select v-model="userForm.role" placeholder="用户权限">
                <el-option label="管理员" :value="1" />
                <el-option label="编辑" :value="2" />
            </el-select>
        </el-form-item>
        <el-form-item label="简介" prop="introduction">
            <el-input v-model="userForm.introduction" type="textarea" />
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
            <UploadPicture :imageUrl="imageUrl" @handleAvatarSuccess="handleAvatarSuccess" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm()">
                添加
            </el-button>
        </el-form-item>
    </el-form>
</template>
<script setup>
import { ref, reactive } from "vue"
import UploadPicture from "@/components/upload/UploadPicture"
import { ElMessage } from 'element-plus'
import axios from "axios";

const userFormRef = ref()

let imageUrl = ref("")

const userForm = reactive({
    username: "",
    password: "",

})

const userRules = reactive({
    username: [{
        required: true,
        message: "用户名不能为空",
        trigger: blur
    }],
    gender: [{
        required: true,
        message: "请选择性别",
        trigger: blur
    }],
    introduction: [{
        required: true,
        message: "个人简介不能为空",
        trigger: blur
    }],
    password: [{
        required: true,
        message: "密码不能为空",
        trigger: blur
    }],
    role: [{
        required: true,
        message: "请选择用户权限",
        trigger: blur
    }],
    avatar: [{
        required: true,
        message: "请上传头像",
        trigger: blur
    }],
})

const submitForm = () => {
    userFormRef.value.validate((valid) => {
        if (valid) {
            console.log(userForm);
            axios.post("/api/admin/user/add", userForm).then(res => {
                console.log(res.data.data);
                // if (res.data.code == 200) {
                //     ElMessage({
                //         type: 'success',
                //         message: "添加成功",
                //     })
                // }
            })
        } else {
            ElMessage({
                type: 'warning',
                message: "请确保信息输入完整",
            })
        }
    })
}

const handleAvatarSuccess = (file) => {
    imageUrl.value = file
    userForm.avatar = imageUrl.value
}
</script>

<style scoped>
.el-form {
    margin-top: 50px;
}
</style>